<template>
  <div>
    <div @keyup.enter="getAllData()">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="params.customer_name" placeholder="项目名称查询" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.corp_name"
            placeholder="负责人查询"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <select-address
            v-model="params.address_code"
            clearable
            placeholder="地址查询"
            :auto-top="true"
            @change="getAllData()"
          ></select-address>
        </el-form-item>
        <el-form-item>
          <el-button @click="getAllData()">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="exportExcel(fileName)" :loading="exportLoading">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <c-table
      border
      v-loading="loading"
      :stripe="false"
      :columns="tableColumns"
      :data="tableData"
      :height="dialogHeight"
    >
      <template v-slot:itemStatus="scope">
        <span class="status-label badge-warning">{{ scope.row.itemStatusLabel }}</span>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getAllData"
      ></el-pagination>
    </div>

    <investigate-self
      :visible.sync="reportVisible"
      :query-id="relatedData.customer_related_id"
      @success="handleEditSuccess"
    ></investigate-self>

    <el-dialog
      :visible.sync="investVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="项目审批表">
          <investigate-self-view :query-id="queryId" :view-mode="true"></investigate-self-view>
        </el-tab-pane>
        <el-tab-pane label="附件">
          <attach-view :queryId="queryId" :visible="investVisible"></attach-view>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { enumGuatype } from '@/credit/plugins/enumTown'

import taskTableMixin from '@/credit/mixin/task/taskTable'

import SelectAddress from '@/components/select/SelectAddress'
// import AttachCmpt from '@/credit/views/city/program/Attach'

import AttachView from '@/credit/components/AttachView'
import InvestigateSelf from '@/credit/views/city/self/components/investApprove/MainDialog'
import InvestigateSelfView from '@/credit/views/city/self/components/investApprove/Main'
import { getWfKey } from '@/credit/views/county/unionProvince/components/projectApprove/index'
import { mapGetters } from 'vuex'
import { getFollow } from '@/credit/mixin/taskTableCountyUnionProvince'
export default {
  components: {
    // CreditFile,
    SelectAddress,
    // AttachCmpt,
    AttachView,
    InvestigateSelf,
    InvestigateSelfView,
  },
  mixins: [taskTableMixin],
  props: {},
  data() {
    return {
      enumGuatype,
      // enumProjectResStatus,
      params: {
        index: 1,
        size: 10,
      },
      // tableName: 'customer_related',
      totalCount: 0,
      tableData: [],
      tableColumns: [
        {
          attrs: { label: '主体名称', prop: 'customer_name', minWidth: 135 },
          process: (v, row) => ({
            attrs: { class: 'project-history', attrs: { 'data-history': row.is_history } },
          }),
        },
        { attrs: { label: '地址', prop: 'address', minWidth: 135 } },
        { attrs: { label: '负责人', prop: 'corp_name', align: 'center' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', align: 'center', width: 110 } },
        +this.status
          ? { attrs: { label: '审批金额', prop: 'approved_funds', align: 'center' } }
          : { attrs: { label: '申请金额', prop: 'apply_funds', align: 'center' } },
        { attrs: { label: '业务类型', prop: 'project_type', align: 'center' } },
        {
          attrs: { label: '待处理人员', prop: 'itemStatusLabel', align: 'center', width: 100 },
          slot: 'itemStatus',
        },
        {
          attrs: { label: '操作', align: 'center', width: 130 },
          operations: [
            {
              content: '审批',
              icon: 'fa fa-gavel',
              event: this.handleEdit,
              ifRender: row => +row.task_status === 0,
            },
            { content: '查看', icon: 'fa fa-search', event: this.handleCreditView },
          ],
        },
      ],
      relatedData: {},
      reportVisible: false,

      attachVisible: false,
      creditVisible: false,
      attachRelatedId: '',
      queryId: '',
      reportData: {},
      investVisible: false,
    }
  },
  computed: {
    ...mapGetters(['userId']),
    isUnion() {
      return this.$store.getters.user.scopeArr?.includes('dirGuaPro') ?? false
    },
    fileName() {
      if (+this.status === 0) {
        return '未审批项目'
      } else {
        return '已审批项目'
      }
    },
    order() {
      if (+this.status === 0) {
        return { item_date: 'desc' }
      } else {
        return {
          N1res_date: 'desc',
          N2res_date_bus: 'desc',
          N3res_date_risk: 'desc',
          N4res_date_corp: 'desc',
        }
      }
    },
  },
  watch: {},
  mounted() {},
  created() {},
  methods: {
    async getAllData(index = 1) {
      await this.getData(index)
      const record = await getFollow(
        this.tableData.filter(item => +item.gua_type !== 2),
        getWfKey(this.isUnion)
      )
      const recordSelf = await getFollow(
        this.tableData.filter(item => +item.gua_type === 2),
        'PROJECT_APPROVAL_DIR'
      )
      const datas = record && record.length ? record.concat(recordSelf) : recordSelf

      this.tableData = this.tableData.map(it => {
        const data = datas.find(item => item.wf_related_id === it.customer_related_id) || {}
        it.itemStatusLabel = data.innerFollow || ''
        return it
      })
    },
    handleCreditView(row) {
      this.reportData = { ...row }
      this.investVisible = true
      this.queryId = row.customer_related_id
    },
    handleAttach(row) {
      this.attachVisible = true
      this.attachRelatedId = row.customer_related_id
    },
    // handleView(row) {
    //   this.creditVisible = true
    //   this.queryId = row.customer_related_id
    // },
    handleEdit(row) {
      this.relatedData = { ...row }
      this.reportVisible = true
    },
    dataAdapter(item) {
      item.project_type = enumGuatype[+item.gua_type] || '-'
      return item
    },
    handleEditSuccess() {
      this.$store.dispatch('getMyTaskCount')
      this.$emit('success', true)
    },
    handleCreditClose() {
      this.creditVisible = false
      this.getAllData(this.params.index)
    },
  },
}
</script>
<style lang="scss" scoped>
.status-label {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  border-radius: 0.25rem;
  transition: color 0.15s;
}
</style>
